<template>
	<Row class="rowboxs">
    <Col span="24" class="perth4">
      <h3>生产单耗成本分析</h3>
    </Col>
    <Col span="12">
        <Card class="btm0">
            <div id="jiachun" style="width:100%;height: 410px;">
            </div>
        </Card>
    </Col>
    <Col span="12">
        <Card>
            <div id="fangxiang" style="width:100%;height: 410px;">
            </div>
        </Card>
    </Col>
    <Col span="12">
        <Card>
            <h3>单耗分析</h3>
            <div style="width:100%;height: 430px;line-height: 25px;font-size:14px;text-align:left;padding:13px;">
              <div>
                <span>煤气：计划单耗15，实际单耗17</span> 
                <span style="color: red; float:right;">负</span>
                <p>原因：为维持合成系统稳定，煤气单耗较高</p>
              </div>
              <div style="margin-top:10px;">
                <span>电：计划单耗13，实际单耗9</span> 
                <span style="color: green; float:right;">正</span>
                <p>原因：本月平均电负荷14046kwh，保证了电单耗的降低</p>
              </div>
              <div style="margin-top:10px;">
                <span>蒸汽：计划单耗20，实际单耗17</span> 
                <span style="color: green; float:right;">正</span>
                <p>原因：本月负荷的降低，缓解了转化蒸汽产量</p>
              </div>
              <div style="margin-top:10px;">
                <span>杂醇：计划单耗16，实际单耗13</span> 
                <span style="color: green; float:right;">正</span>
                <p>原因：与经营一部做好沟通，节省了成本</p>
              </div> 
              <div style="margin-top:10px;">
                <span>驰放气：计划单耗20，实际单耗22</span> 
                <span style="color: red; float:right;">负</span>
                <p>原因：本月负荷的升高，也保证了驰放气的升高</p>
              </div> 
              <div style="margin-top:10px;">
                <span>低压蒸汽：计划单耗10，实际单耗15</span> 
                <span style="color: red; float:right;">负</span>
                <p>原因：为维持合成系统稳定，低压蒸汽供量较大</p>
              </div> 
              <div style="margin-top:10px;">
                <p>总结：继续落实机电仪巡查和工程师夜间值班制度，保证生产稳定，避免运行事故的发生。</p>
              </div> 
            </div>
        </Card>
    </Col>
    <Col span="12">
        <Card>
            <h3>成本分析</h3>
            <div style="width:100%;height: 430px;line-height: 25px;font-size:14px;text-align:left;padding:13px;">
              <div>
                <span>煤气：计划花费900元，实际花费1100元</span> 
                <span style="float:right;">亏损<span style="color: red;">200</span>元</span>
              </div>
              <div style="margin-top:10px;">
                <span>电：计划花费1200元，实际花费1000元</span> 
                <span style="float:right;">盈利<span style="color: green;">200</span>元</span>
              </div>
              <div style="margin-top:10px;">
                <span>蒸汽：计划花费900元，实际花费700元</span> 
                <span style="float:right;">盈利<span style="color: green;">200</span>元</span>
              </div>
              <div style="margin-top:10px;">
                <span>杂醇：计划花费600元，实际花费550元</span> 
                <span style="float:right;">盈利<span style="color: green;">50</span>元</span>
              </div>
              <div style="margin-top:10px;">
                <span>驰放气：计划花费1000元，实际花费1500元</span> 
                <span style="float:right;">亏损<span style="color: red;">500</span>元</span>
              </div>
              <div style="margin-top:10px;">
                <span>低压蒸汽：计划花费900元，实际花费1300元</span> 
                <span style="float:right;">亏损<span style="color: red;">400</span>元</span>
              </div> 
              <div style="margin-top:10px;">
                <p>总结：<span style="color: red;">亏损650元</span></p>
              </div>
            </div>
        </Card>
    </Col>
  </Row>
</template>
<script>
export default {
  data () {
    return {
      "charts": "",
      "option": {
        "title": {
          "text": '甲醇单耗和成本'
        },
        "tooltip": {
          "trigger": 'axis'
        },
        "legend": {
          "data": ['计划单耗', '实际单耗']
        },
        "toolbox": {
          "show": true,
          "feature": {
            "dataView": {show: true, readOnly: false},
            "magicType": {show: true, type: ['line', 'bar']},
            "restore": {show: true},
            "saveAsImage": {show: true}
          }
        },
        "calculable": true,
        "xAxis": {
          "type": 'category',
          "data": ['煤气', '电', '蒸汽', '杂醇', '驰放气', '低压蒸汽', "合计"]
        },
        "yAxis": {
          "type": "value"
        },
        "series": [{
          "name": "计划单耗",
          "type": "bar",
          "data": [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 180],
          "markPoint": {
            "data": [
              {
                "type": "max",
                "name": '最大值'
              },
              {
                "type": 'min',
                "name": "最小值"
              }
            ]
          }
        },
        {
          "name": "实际单耗",
          "type": "bar",
          "data": [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 200],
          "markPoint": {
            "data": [
              {
                "name": "年最高",
                "value": 182.2,
                "xAxis": 7,
                "yAxis": 183
              },
              {
                "name": "年最低",
                "value": 2.3,
                "xAxis": 11,
                "yAxis": 3
              },
              {
                "type": "max",
                "name": '最大值'
              },
              {
                "type": 'min',
                "name": "最小值"
              }
            ]
          }
        }]
      }
    };
  },
  methods: {
    drawPie (id) {
      this.charts = echarts.init(document.getElementById(id));
      this.charts.setOption(this.option);
    }
  },
  mounted () {
    this.drawPie('jiachun');
    this.drawPie('fangxiang');
  }
};
</script>
<style scoped>
    .perth4{
        line-height: 35px;
    }
    .btm0 div{
        padding-bottom: 0!important;
    }
</style>